<!--
 * @Author: 小陆同学 1361176289@qq.com
 * @Date: 2024-06-24 13:39:40
 * @LastEditors: 小陆同学 1361176289@qq.com
 * @LastEditTime: 2024-06-25 09:12:13
 * @FilePath: \loCode\src\components\xl-table\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="xl-lable">
		<table>
			<thead>
				<tr>
					<slot></slot>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in data" :key="index">
					<td v-for="(headerItem, keyIndex) in header" :key="keyIndex" :style="headerItem.style">{{ item[headerItem.prop] }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script setup>
	import { ref, defineSlots, onMounted } from "vue";
	// 获取slot插槽内容
	const slots = defineSlots();

	const props = defineProps({
		data: {
			type: Array,
			default: () => [],
		},
	});

	const header = ref([]);

	onMounted(() => {
		header.value = slots.default().map((item) => item.props);
	});
</script>
<style lang="scss" scoped>
	.xl-lable {
		user-select: none;
		width: 100%;
		height: 100%;
		table {
			width: 100%;
			height: 100%;
			text-align: center;
			th {
				background-color: #f0f0f0;
				padding: 8px;
				border: 1px solid #ccc;
				font-size: 15px;
			}

			td {
				padding: 8px;
				border: 1px solid #ccc;
				font-size: 14px;
			}
		}
	}
</style>
